<template>
    <div class="wraps">
        <div class="per-top flex" >
            <div class="imsg" :style="{backgroundImage:'url('+userCenter.headimgurl+')'}"></div>
            <div class="pic-box" @click="editPerson()">
                <img v-if="userInfo&&userInfo.userCenter" :src="userCenter.headimgurl">
            </div>
            <h2 v-if="userInfo&&userCenter.nickname">{{userCenter.nickname}}</h2>
            <a href="javascript:;" @click="gosignCount">签到+
                <span v-if="userInfo&&userInfo.userCenter">{{userCenter.score}}</span>积分
            </a>
        </div>

        <div class="per-nav">
            <ul class="flex">
                <li>
                    <a href="javascript:;" @click="toPay(0,'')" class="flex">
                        <div><img src="../assets/images/4.png"><span>{{noPayNum||0}}</span></div>
                        <h2>待付款</h2>
                    </a>
                </li>

                <li>
                    <a href="javascript:;" @click="toReceipt()" class="flex">
                        <div><img src="../assets/images/5.png"><span>{{noReciveNum||0}}</span></div>
                        <h2>待收货</h2>
                    </a>
                </li>

                <li>
                    <a href="javascript:;" @click="toRefund()" class="flex">
                        <div><img src="../assets/images/6.png"></div>
                        <h2>退款/售后</h2>
                    </a>
                </li>

                <li>
                    <a href="javascript:;" @click="toEvaluate()" class="flex">
                        <div><img src="../assets/images/7.png"></div>
                        <h2>待评价</h2>
                    </a>
                </li>

                <li>
                    <a href="javascript:;" @click="allOrder()" class="flex">
                        <div><img src="../assets/images/8.png"></div>
                        <h2>全部订单</h2>
                    </a>
                </li>
            </ul>
        </div>

        <div class="per-main">
            <h1>我的21克</h1>
            <div class="per-main-top">
                <ul class="flex">
                    <li>
                        <a href="javascript:;" @click="goFavorate" class="flex">
                            <span>{{userInfo.allCollectionCount || 0}}</span>
                            <h2>我的收藏</h2>
                        </a>
                    </li>

                    <li>
                        <a href="javascript:;" @click="goAttention" class="flex">
                            <span>{{userInfo.attentionCount || 0}}</span>
                            <h2>我的关注</h2>
                        </a>
                    </li>

                    <li>
                        <a href="javascript:;" @click="goFans" class="flex">
                            <span>{{userInfo.FansCount || 0}}</span>
                            <h2>我的粉丝</h2>
                        </a>
                    </li>
                    <li>
                       <router-link class="flex" :to="{path:'/praiseList',query:{userId:userId}}">
                            <span>{{userInfo.thumbMeCount || 0}}</span>
                            <h2>我的超赞</h2>
                       </router-link>
                    </li>
                </ul>
            </div>

            <div class="per-main-wrap">
                <ul>
                    <li class="li1">
                        <a href="javascript:;" @click="goGoodsManage" class="flex">
                            <h2>商品管理</h2>
                            <span v-if="userInfo&&userInfo.productCount">{{userInfo.productCount}}</span>
                        </a>
                    </li>

                    <li class="li2">
                        <router-link :to="{path:'/vipCenter',query:{openid:openId}}" class="flex">
                            <h2>会员中心</h2>
                            <span>{{userCenter.score|scoreLi}}</span>
                        </router-link>
                    </li>

                    <li class="li3" @click="goAddressManage">
                        <a href="javascript:;" class="flex">
                            <h2>地址管理</h2>
                        </a>
                    </li>

                    <li class="li4" @click="goShopApply">
                        <a href="javascript:;" class="flex">
                            <h2>二手认证</h2>
                            <span class="span1">零成本，轻松赚大钱！</span>
                        </a>
                    </li>
                    <li class="li8">
                       <router-link class="flex" :to="{path:'/about'}">
                            <h2>关于21克</h2>
                        </router-link>
                    </li>
                    <li class="li5">
                        <router-link class="flex" :to="{path:'/Coupon',query:{userId:$route.query.userId}}">
                           <h2>优惠券</h2>   
                        </router-link>
                    </li>
                     <li class="li7" @click="goFeedback">
                        <a href="javascript:;" class="flex">
                            <h2>意见反馈</h2>
                        </a>
                    </li>
                    <li class="li6" @click="goRegister">
                        <h2>退出登录</h2>
                    </li>
                </ul>
            </div>
        </div>
         <foot-nav/>
    </div>


</template>


<script>
    import axios from '@/api/request'
    import footNav from "@/components/footer-nav.vue"
    import { mapState,mapGetters,mapMutations } from "vuex";
    export default {
        name:'personCenter',
        components: {
            footNav
        },
        data() {
            return {
                userInfo: {},
                userCenter: {},
                _userId: '',
                _openId: '',
                noPayNum: null,
                noReciveNum: null,
            };
        },
        computed:{
            ...mapGetters({
              openId: 'doneOpenId',
              userId: 'doneUserId',
              phone: 'donePhone',
              schoolId: 'doneSchoolId',
            }),
        },
        created() {
            this._openId = this.$route.query.openId
            if(!this._openId){
                this._openId = this.openId
            }
            this._userId = this.$route.query.userId
            if(!this._userId){
                this._userId = this.userId
            }
            this.fetchUserInfo()
            this.fetchOrderNum()
        },
        filters:{
          scoreLi(score){
              let sct=""
              if(score<200){
                sct='V1会员'
              }else if(score<400){
               sct='V2会员'
              }else if(score<600){
               sct='V3会员'
              }else if(score<800){
                sct='V4会员'
              }else{
                sct='V5会员'
              }
              return sct
          }
        },
        methods: {
            ...mapMutations(['SET_OPENID','SET_USERID','SET_PHONE','SET_SCHOOLID']),
            gosignCount(){   //签到
              var self=this
                axios('/device/userEntity/sign','post',{id:this.$route.query.userId}).then(res=>{
                   console.log(res)
                  if(res.data.code==1000){
                        
                        this.$vux.toast.text(res.data.message, 'middle')
                        self.fetchUserInfo()
                    }else if(res.data.code=1011){
                        this.$vux.toast.text("签到失败，您已经签到了", 'middle')
                    }
                })
            },
            fetchUserInfo() {
                let data = {
                    openId: this._openId
                }
                axios('/device/userEntity/getUserCenter','post',data).then(res=>{
                    if(res.data.code==1000){
                         console.log(res)
                        this.userInfo = res.data.data
                        this.userCenter=this.userInfo.userCenter
                    }
                })
            },
            fetchOrderNum() {   //获取订单信息,显示数字
                let data = {
                    userId: this._userId
                }
                axios('/device/indentinfo/countWill','post',data).then(res=>{
                    if(res.data.code==1000){
                        this.noPayNum = res.data.data.CountStatus
                        this.noReciveNum = res.data.data.CountConfire
                    }
                })
            },
            editPerson() {  //编辑资料
                this.$router.push({path: 'EditPersInfo',query:{userId:this._userId}})
            },
            toPay() {  //待付款
                this.$router.push({name: 'my-order',query:{id:'0'}})
            },
            toReceipt() {  //待收货
                this.$router.push({name: 'my-order',query:{id:'1'}})
            },
            toRefund() {  //退款、售后
                this.$router.push({name: 'my-order',query:{id:'2'}})
            },
            toEvaluate() {  //待评价
                this.$router.push({name: 'my-order',query:{id:'3'}})
            },
            allOrder() {  //全部订单
                this.$router.push({name: 'my-order',query:{id:'4'}})
            },
            goFavorate() {  //我的收藏
                this.$router.push({path:'/my-favorate',query:{userId:this._userId}})
            },
            goFeedback(){
               this.$router.push({path:'/Feedback',query:{userId:this._userId}})
            },
            goAttention() {  //我的关注
                this.$router.push({path: '/myFans',query: {userId: this.$route.query.userId}})
            },
            goFans() {  //我的粉丝
                this.$router.push({path: '/myFans',query: {userId: this.$route.query.userId}})
            },
            goGoodsManage() {
                console.log('去商品管理')
                if(this.userInfo.userCenter.ssm==2){
                    this.$router.push({path: '/manage',query: {userId: this._userId}})
                }else if(this.userInfo.userCenter.ssm==1){
                    this.$vux.toast.text('认证审核中,请耐心等待吧', 'middle')
                }else{
                    this.$vux.toast.text('请先申请二手认证', 'middle')
                }
            },
            goAddressManage() {
                console.log('去地址管理')
                this.$router.push({path: 'AddressManage',query:{userId:this._userId}})
            },
            goShopApply() {
                console.log('去申请入驻')
                if(this.userInfo.userCenter.ssm==0){
                    this.$router.push({name: 'shopApply'})
                }else{
                    this.$vux.toast.text('您已经认证,请不要重复申请', 'middle')
                }
                
            },
            goCoupon() {
                console.log('去优惠券')
                this.$router.push({name: 'my-favorate'})
            },
            clearLocal() {
                // localStorage.removeItem('openId')
                // localStorage.removeItem('userId')
                // localStorage.removeItem('phone')
                // localStorage.removeItem("avatar")
                // localStorage.removeItem("password")
                // localStorage.clear();
                // 这里清除不掉
            },
            clearLocalAndStore() {
                localStorage.removeItem('openId')
                localStorage.removeItem('userId')
                localStorage.removeItem('phone')
                localStorage.removeItem("avatar")
                localStorage.removeItem("password")
                localStorage.clear();
                this.SET_OPENID('')
                this.SET_USERID('')
                this.SET_PHONE('')
                this.SET_SCHOOLID('')
            },
            checkLocal() { 
                alert(this.openId+'+'+this.userId+'+'+this.phone+'+'+this.schoolId)
            },
            goRegister() {
                let data = { openId: this._openId}
                axios('/device/userEntity/getOut','post',data).then(res=>{
                    if(res.data.code==1000){
                        this.SET_OPENID('')
                        this.SET_USERID('')
                        this.SET_PHONE('')
                        this.SET_SCHOOLID('')
                        // this.$router.go(0)
                        // window.location.reload()
                        this.$router.push({path: '/login'})
                    }
                }) 
            },
            ceshi() {
                // window.location.href="http://localhost:8080/#/login?aaa=123&bbb=987"
                axios('/device/school/getByCode','post',{schoolCode: '001'}).then(res=>{
                    if(res.data.code==1000){
                        console.log(333)
                        console.log(res)
                    }
                }) 
            }
        }
    }
</script>
<style scoped>
   @import "../assets/css/person.css";
  .wraps{
      padding-bottom:1.4rem;
  }
</style>
